import { Ref, ref, onMounted, onUnmounted } from 'vue'
// import {  ref, onMounted, onUnmounted } from 'vue'
const outsideClick = (eleRef: Ref<null|HTMLElement>) => {
  const isOpen = ref(false)
  const handleClick = (e: MouseEvent) => {
    if (eleRef.value) {
      if (eleRef.value.contains(e.target as HTMLElement)) {
        isOpen.value = false
      } else {
        isOpen.value = true
      }
    }
  }
  onMounted(() => {
    document.addEventListener('click', handleClick)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handleClick)
  })
  return isOpen
}

export default outsideClick
